<template>
  <div id="search">

    <ul v-for="item in datas" :key="item.t">
      <li style="color:red">{{item.name}}</li>

      <li style="overflow:hidden"><div style="float:left"><img :src="item.profile_image" alt="" width="50px" height="50px"></div><div style="float:left" width="250px"><span width="100%">{{item.text}}</span></div></li>
      <li>{{item.passtime}}</li>
    </ul>

  </div>
</template>
<script>
export default {
  name:'search',
  data(){
    return {
      datas:[],
      count:0
    }
  },
  created(){

      this.$axios.get('https://www.apiopen.top/satinApi?type=1&page=1')
      .then(res=>{
        this.datas = res.data.data
      })
      .catch(err=>{
        console.log(err)
      })
    }


}

</script>
<style lang="less">
#search{
  width: 98%;
  padding:42px 1% 55px;
  ul{
    margin:5px;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 2px 0 #ccc;
    display: block;


    li{
      padding: 5px;

      img{
        margin-right:5px;vertical-align: top;
      }
    }
  }
  ul:hover{
    transform: translateY(-2px);
    transition: 0.3s ;
    box-shadow: 0 0 4px 2px #facf;
    }
}
</style>
